<template>
  <view class="page">
    <view class="page-header">
      <view class="header-title" @click="popup.show = true">
        {{model.yearTitleName==''?'请选择学期':model.yearTitleName}}
      </view>
      <js-calendar ref="calendar" :showLunar="true" :showMonthBg="true" :showShrink="true" :signList="signList"
        :startDate="model.startTime" :date="model.startTime" :endDate="model.endTime" shrinkText="收起日历"
        @dayChange="dayChange" weekType="" @monthChange="monthChange" @shrinkClick="shrinkClick">
      </js-calendar>
      <view class="message-list-title">本学期校历事件</view>
      <!-- <view class="operation">
        <u-button v-if="hasPermission('misSchoolCalendarEvent_add')" style="margin-right: 20rpx;" size="mini"
          shape="circle" plain @click="navTo('form?calendarId='+model.id)">新增事件</u-button>
        <u-button size="mini" shape="circle" plain @click="handleAllSignList()">查看全部</u-button>
      </view> -->
    </view>
    <view class="page-main">
      <scroll-view class="scroll-list" scroll-y="true" scroll-with-animation="true">
        <view class="message-list">
          <view v-for="(item, index) in signList" :key="index" class="message-item">
            <view class="message-item-hd">{{item.date}}</view>
            <view class="message-item-bd">
              <view class="message-title ellipsis">{{item.title}}</view>
              <view class="message-desc multiple-ellipsis">{{item.eventDesc}}</view>
            </view>
          </view>
        </view>
        <!-- <u-cell-group :border="false">
          <u-swipe-action :options="options" :show="item.show" v-for="(item, index) in signList" :key="index"
            :index="index" @click="optionsClick" @open="open">
            <u-cell-item :arrow="true">
              <text slot="title">{{item.date}} {{item.title}}</text>
              <text slot="label">{{item.eventDesc}}</text>
            </u-cell-item>
          </u-swipe-action>
        </u-cell-group> -->
      </scroll-view>
    </view>
    <view class="page-footer">
      <view v-if="hasPermission('misSchoolCalendarEvent_add')" class="button primary"
        @click="navTo('form?calendarId='+model.id)">新增事件</view>
    </view>
    <u-picker v-model="popup.show" mode="selector" :range="popup.titleRange" @confirm="handlePickerConfirm"
      @cancel="popup.show = false" :range-key="popup.rangKey"></u-picker>
  </view>
</template>

<script>
  /**
   * Copyright (c) 2013-Now http://aidex.vip All rights reserved.
   */
  import JsCalendar from '@/components/js-calendar/js-calendar.vue'
  import calendar from '@/components/js-calendar/calendar.js'
  export default {
    data() {
      return {
        model: {
          id: '',
          year: '',
          term: '',
          startTime: '',
          totalWeek: '',
          status: '1',
          endTime: '',
          yearTitleName: ''
        },
        popup: {
          show: false,
          mode: "top",
          rangKey: 'yearName',
          titleRange: [],
          titleList: [],
        },
        signList: [],
        allSignList: [],
        options: []
      }
    },
    onLoad(params) {
      let self = this;
      let calendarId = params.calendarId;
      this.$u.api.mis.misSchoolCalendar.getDict().then(res => {
        res.data.forEach((item) => {
          self.popup.titleRange.push(item.yearName);
        })
        self.popup.titleList = res.data;
        if (res.data.length > 0) {
          if (!calendarId) {
            calendarId = self.popup.titleList[self.popup.titleList.length - 1].id;
          }
          self.getDetail(calendarId);
        }
      })
      if (this.hasPermission('misSchoolCalendarEvent_edit')) {
        this.options.push({
          text: '编辑',
          style: {
            background: '#0055ff'
          },
          action: 'edit'
        });
      }
      if (this.hasPermission('misSchoolCalendarEvent_delete')) {
        this.options.push({
          text: '删除',
          style: {
            background: '#ff0000'
          },
          action: 'delete'
        });
      }
    },
    methods: {
      dayChange(dayInfo) { // 点击日期
        // console.log("点击日期", JSON.parse(JSON.stringify(dayInfo)));
        this.signList = dayInfo.daySign;
      },
      monthChange(monthInfo) { // 切换月份
        // console.log("切换月份", JSON.parse(JSON.stringify(monthInfo)));
      },
      shrinkClick(type) {
        // console.log("当前状态", type);
      },
      getDetail(id) {
        let self = this;
        this.$u.api.mis.misSchoolCalendar.detail({
          id: id
        }).then(res => {
          Object.assign(this.model, res.data);
          let list = [];
          res.data.eventList.forEach((item) => {
            let dateTime = item.startTime;
            while (calendar.dateCompare(dateTime, item.endTime)) {
              list.push({
                id: item.id,
                calendarId: item.calendarId,
                date: dateTime,
                title: item.eventName,
                eventDesc: item.eventDesc,
                show: false
              })
              dateTime = calendar.addDays(dateTime, 1);
            }
          })
          self.model.yearTitleName = self.model.year + "年 第" + self.model.termName + "学期";
          self.$refs.calendar.addSignList(list);

          self.signList = list;
          self.allSignList = list;
        })
      },
      getDict() {
        this.$u.api.mis.misSchoolCalendar.getDict().then(res => {
          this.titleList = res.data;
        })
      },
      handlePickerConfirm(e) {
        let row = this.popup.titleList[e[0]];
        this.popup.show = false;
        this.model.yearTitleName = row.yearName;
        this.getDetail((row.id));
      },
      handleAllSignList() {
        this.signList = this.allSignList;
      },
      navTo(url) {
        uni.navigateTo({
          url: url
        });
      },
      optionsClick(rowIndex, btnIndex) {
        let row = this.signList[rowIndex];
        if (this.options[btnIndex].action == 'edit') {
          this.navTo('form?id=' + row.id + "&calendarId=" + row.calendarId);
        } else if (this.options[btnIndex].action == 'delete') {
          let self = this;
          uni.showModal({
            title: '提示',
            content: '确认要删除该数据吗？',
            showCancel: true,
            success: function(res2) {
              if (res2.confirm) {
                self.$u.api.mis.misSchoolCalendarEvent.remove({
                  ids: row.id
                }).then(res => {
                  uni.showToast({
                    title: "删除成功！",
                    duration: 2000
                  });
                  self.navTo('index?calendarId=' + row.calendarId);
                });
              }
            }
          });
        }
      },
      open(index) {
        this.signList[index].show = true;
        this.signList.map((val, idx) => {
          if (index != idx) this.signList[idx].show = false;
        })
      }
    }
  }
</script>

<style lang="less">
  .page {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: #fff;
  }

  .page-header {
    padding-top: 40rpx;
    background: #3989FC;
  }

  .header-title {
    position: relative;
    padding: 0 48rpx 0 24rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #fff;

    &::after {
      content: '';
      position: absolute;
      top: 12rpx;
      right: 28rpx;
      display: inline-block;
      width: 12rpx;
      height: 12rpx;
      border-top: 2px solid #fff;
      border-right: 2px solid #fff;
      transform: rotate(45deg);
    }
  }

  .page-main {
    flex: 1;
    overflow: hidden;

    .scroll-list {
      height: 100%;
    }
  }

  .page-footer {
    padding: 0 32rpx 32rpx;

    .button {
      width: 100%;
      height: 96rpx;
      border-radius: 48rpx;
      line-height: 96rpx;
      text-align: center;
      font-size: 32rpx;
      font-weight: 500;
      color: #999;
      background: #fff;

      &.primary {
        color: #fff;
        background: #3989FC;
      }

      &+.button {
        margin-left: 24rpx;
      }
    }
  }

  .message-list-title {
    padding: 24rpx 32rpx;
    line-height: 56rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #333;
    background: #fff;
  }

  .message-list {
    padding: 24rpx 32rpx;
  }

  .message-item {
    display: flex;
    align-items: center;
    border-radius: 8rpx;
    padding: 32rpx 0;
    font-size: 24rpx;
    color: #999;
    background: #F3F3F5;

    &+.message-item {
      margin-top: 24rpx;
    }
  }

  .message-item-hd {
    flex-shrink: 0;
    padding: 0 32rpx;
    font-size: 32rpx;
    font-weight: 700;
    color: #333;
  }

  .message-item-bd {
    flex: 1;
    min-width: 0;
    border-left: 1px solid #D9D9D9;
    padding: 0 32rpx;
  }

  .message-title {
    font-size: 28rpx;
    font-weight: 500;
    color: #333;
  }

  .ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .multiple-ellipsis {
    display: -webkit-box;
    word-break: break-all;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
</style>